<ql-card class="box-card">
    <div class="panel-heading" style="margin-top: 0px">
        <ng-template #header>
            <div class="clearfix">
                <div class="card-title">
                    <ql-button style="float: right;" type="primary" (click)="open2()">保存布局</ql-button>
                    <ql-button style="float: right;" type="primary" (click)="open()" style="float: right;margin-right: 10px;">添加组件
                    </ql-button>
                </div>
            </div>
        </ng-template>

        <div class="panel-body">
            <!--/.Accordion wrapper-->
            <div id="fullscreen" style="position:relative;padding-top:20px;background: transparent;">
                <em class="fa fa-compress hand " style="position: absolute;right: 0px;top: 1px; font-size: 20px;margin-top: 25px;z-index: 10;padding-right: 10px" (click)="zoomItem()" (touchstart)="zoomItem()" title="缩小"></em>
                <!--<em class="fa fa-arrow-circle-left hand z-index" style="position: absolute;left: 0px;top: 50%; font-size:30px; z-index:99999999;" (click)="upWard()"  (touchstart)="upWard()"  title="向上"></em>-->
                <!--<em class="fa fa-arrow-circle-right hand z-index" style="position: absolute;right: 0px;top: 50%; font-size:30px; z-index:99999999;"  (click)="down()"  (touchstart)="down()"  title="向下"></em>-->
                <div [ngSwitch]="fullscreenIndex">
                    <div *ngSwitchCase="'app_view1'">
                        <app-asset-proportion></app-asset-proportion>
                    </div>

                    <div *ngSwitchCase="'app_view2'">
                        <app-risk-money></app-risk-money>
                    </div>

                    <div *ngSwitchCase="'app_view3'">
                        <app-risk-evaluation-rate></app-risk-evaluation-rate>
                    </div>

                    <div *ngSwitchCase="'app_view4'">
                        <app-leverage-ratio></app-leverage-ratio>
                    </div>

                    <div *ngSwitchCase="'app_view5'">
                        <app-industry-concentrate></app-industry-concentrate>
                    </div>
                    <div *ngSwitchCase="'app_view6'">
                        <app-reserve-money></app-reserve-money>
                    </div>

                    <div *ngSwitchCase="'app_view7'">
                        <app-invest-type></app-invest-type>
                    </div>

                    <div *ngSwitchCase="'app_view8'">
                        <app-profit-type></app-profit-type>
                    </div>
                    <div *ngSwitchCase="'app_view11'">
                        <app-compaign></app-compaign>
                    </div>

                    <div *ngSwitchCase="'app_view12'">
                        <app-campaign-activity></app-campaign-activity>
                    </div>
                    <div *ngSwitchCase="'app_view13'">
                        <app-campaign-customer></app-campaign-customer>
                    </div>
                    <div *ngSwitchCase="'app_view14'">
                        <app-customer-count></app-customer-count>
                    </div>
                    <div *ngSwitchCase="'app_view15'">
                        <app-customer-aum></app-customer-aum>
                    </div>
                    <div *ngSwitchCase="'app_view16'">
                        <app-task-submit></app-task-submit>
                    </div>
                </div>
            </div>

            <gridster [options]="options" id="gridster">
                <gridster-item [item]="item" *ngFor="let item of dashboard;let i =index;">
                    <!-- your content here -->
                    <div>
                        <div class="fs-md">
                            <label class="item-label gridster-item-content"></label>
                            <div style="position:absolute;top: 0px;right:0px;z-index: 10;">
                                <div class="float-right pr-10 hand gridster-item-content" style="cursor: pointer;padding-right: 14px;padding-bottom: 13px;margin-top: 13px" (click)="showLayout($event,item)"><em class="fa fa-info-circle" title="查看布局信息"></em>
                                </div>
                                <div class="float-right pr-10 hand gridster-item-content" style="cursor: pointer;padding-right: 10px;padding-bottom: 13px;margin-top: 13px" (click)="removeItem($event, item)" (touchstart)="removeItem($event, item)" mdTooltip="Remove"><em class="fa fa-times-circle" title="删除"></em>
                                </div>
                                <div class="float-right pr-10 hand" style="cursor: pointer;padding-right: 12px;padding-bottom: 13px;margin-top: 13px">
                                    <em class="fa fa-arrows" title="拖拽"></em>
                                </div>
                            </div>
                            <div [ngSwitch]="item.id" class="gridster-item-content" style=" margin-top: 15px">
                                <div *ngSwitchCase="'app_view1'">
                                    <app-asset-proportion></app-asset-proportion>
                                </div>
                                <div *ngSwitchCase="'app_view2'">
                                    <app-risk-money></app-risk-money>
                                </div>
                                <div *ngSwitchCase="'app_view3'">
                                    <app-risk-evaluation-rate></app-risk-evaluation-rate>
                                </div>
                                <div *ngSwitchCase="'app_view4'">
                                    <app-leverage-ratio></app-leverage-ratio>
                                </div>
                                <div *ngSwitchCase="'app_view5'">
                                    <app-industry-concentrate [hdata5]='data5'></app-industry-concentrate>
                                </div>
                                <div *ngSwitchCase="'app_view6'">
                                    <app-reserve-money [hdata6]='data6'></app-reserve-money>
                                </div>
                                <div *ngSwitchCase="'app_view7'">
                                    <app-invest-type [hdata7]='data7'></app-invest-type>
                                </div>
                                <div *ngSwitchCase="'app_view8'">
                                    <app-profit-type [hdata8]='data8'></app-profit-type>
                                </div>
                                <div *ngSwitchCase="'app_view9'">
                                    <app-task [hdata9]='heightData9' [wdata9]='widthData9'></app-task>
                                </div>
                                <div *ngSwitchCase="'app_view10'">
                                    <app-calendar [hdata10]='heightData10' [wdata10]='widthData10'></app-calendar>
                                </div>
                                <div *ngSwitchCase="'app_view11'">
                                    <app-compaign [hdata6]='data6'></app-compaign>
                                </div>
                                <div *ngSwitchCase="'app_view12'">
                                    <app-campaign-activity></app-campaign-activity>
                                </div>
                                <div *ngSwitchCase="'app_view13'">
                                    <app-campaign-customer></app-campaign-customer>
                                </div>
                                <div *ngSwitchCase="'app_view14'">
                                    <app-customer-count></app-customer-count>
                                </div>
                                <div *ngSwitchCase="'app_view15'">
                                    <app-customer-aum></app-customer-aum>
                                </div>
                                <div *ngSwitchCase="'app_view16'">
                                    <app-task-submit [hdata6]='data6'></app-task-submit>
                                </div>
                            </div>
                        </div>
                    </div>
                </gridster-item>
            </gridster>
        </div>
    </div>
</ql-card>

<!-- 弹出对话框样式模版 -->
<div id="large" class="modal fade" tabindex="-1" aria-hidden="true" [class.in]="attrDialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="attrDialog=false;">
          <span aria-hidden="true">×</span>
        </button>
                <h4 class="modal-title w-100">新增组件</h4>
            </div>
            <div class="modal-body">
                <formio [form]='form' [submission]="formData" [refresh]="refreshForm" (submit)="onSubmit($event)" (customEvent)="cancel()"> </formio>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" aria-hidden="true" [class.in]="attrDialog2">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="attrDialog2=false;">
          <span aria-hidden="true">×</span>
        </button>
                <h4 class="modal-title w-100">组件布局信息</h4>
            </div>
            <div class="modal-body">
                <formio [form]='form2' [submission]="formData2" [refresh]="refreshForm"> </formio>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" tabindex="-1" aria-hidden="true" [class.in]="attrDialog3">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="cancel2()">
          <span aria-hidden="true">×</span>
        </button>
                <h4 class="modal-title w-100">提示信息</h4>
            </div>
            <div class="modal-body" style="height:80px">
                您确认要保存当前布局信息吗？
                <formio [form]='form3' (submit)="onSubmit2()" (customEvent)="cancel2()" [refresh]="refreshForm3"> </formio>
                <!--<ql-button type="primary" style="margin-left: 370px;margin-bottom: 10px" (click)="save()">确定</ql-button>-->
                <!--<ql-button type="primary" (click)="attrDialog3=false">取消</ql-button>-->
            </div>
        </div>
    </div>
</div>